VS Code のフォーマッターで自動整形する (editor.formatOnSave)｜まくろぐ |
您所在的位置：网站首页 › typescript 整型 › VS Code のフォーマッターで自動整形する (editor.formatOnSave)｜まくろぐ |
|
VS Code には、標準で各種言語用のフォーマッターが搭載されており、JavaScript、TypeScript、JSON、HTML などのコードを自動整形することができます。 手動でフォーマッターを起動する ファイル全体をフォーマット (editor.action.formatDocument) コマンドパレット1 を使う場合: Format Document を選択 ショートカットキーを使う場合: (Windows) Shift + Alt + F (macOS) Shift + Option + F 選択中の行をフォーマット (editor.action.formatSelection) コマンドパレット1 を使う場合: Format Selection を選択 ショートカットキーを使う場合: (Windows) Ctrl + K → Ctrl + F (macOS) Cmd + K → Cmd + F ファイル保存時などに自動でフォーマットする下記の設定をしておくと、ファイル保存時や、コードの編集中に自動的にフォーマッターを起動することができます。 設定ファイル (settings.json) の場所に関しては、こちらの記事 を参考にしてください。 全ての種類のファイルで自動フォーマットする場合 settings.json { // 自動フォーマット設定 "editor.formatOnSave": true, // 保存時にフォーマット "editor.formatOnType": true, // 入力中（改行時）にフォーマット "editor.formatOnPaste": true, // ペースト時にフォーマット // その他... }フォーマッターによっては、保存時のフォーマット (editor.formatOnSave) にしか対応していません。 特定の種類のファイルで自動フォーマットする場合下記は、TypeScript ファイル (.ts, .tsx) の編集中のみオートフォーマットを有効にする例です（参考: per-language configuration）。 settings.json { // .ts ファイル用の設定 "[typescript]": { "editor.formatOnSave": true, "editor.formatOnType": true, "editor.formatOnPaste": true, }, // .tsx ファイル用の設定 "[typescriptreact]": { "editor.formatOnSave": true, "editor.formatOnType": true, "editor.formatOnPaste": true, }, // ... }おすすめは、デフォルトで自動フォーマットを有効にしておいて、フォーマットしたくない種類のファイルだけ OFF にする設定です。 { // デフォルトで自動フォーマットを ON "editor.formatOnSave": true, // Markdown ファイルは自動フォーマットしない "[markdown]": { "editor.formatOnSave": false, "editor.wordWrap": "on", "editor.renderWhitespace": "all", "editor.acceptSuggestionOnEnter": "off", "files.trimTrailingWhitespace": false }, // ... } Prettier などの拡張フォーマッターを使用するVS Code に標準搭載されているフォーマッターの代わりに、拡張機能が提供するフォーマッターを使用するには、editor.defaultFormatter にその拡張機能の ID を設定します。 ここでは、下記の Prettier 拡張を使ってみます。 Prettier 自体のインストールや設定 は終わっているものとします。 Prettier - Code formatter - Visual Studio Marketplaceこの拡張機能の ID は esbenp.prettier-vscode なので、設定ファイルの中で次のように指定します。 settings.json { // 自動フォーマット設定 "typescript.format.enable": false, // 組み込みのフォーマッターは無効にする "editor.defaultFormatter": "esbenp.prettier-vscode", // Prettier を使う "editor.formatOnSave": true, "editor.formatOnType": true, "editor.formatOnPaste": true, // ... }上記では、ファイル保存時 (formatOnSave) などに自動でフォーマットをかけるように設定していますが、コマンドパレット1 から Format Document などを選んだ場合も同様に Prettier 拡張のフォーマッターが使われるようになります。 Cmd/Ctrl + Shift + P ↩︎ 関連記事 VS Code の設定ファイルの場所 (settings.json) MongoDB for VS Code で Azure Cosmos DB を操作する TypeScript コードを Prettier で自動整形する ESLint + Prettier の設定方法まとめ EditorConfig でコーディングスタイルを統一する VS Code で行末の空白（半角スペース）を自動で削除する (files.trimTrailingWhitespace) VS Code でビルドタスクやテストタスクを登録する (tasks.json) VS Code Prettier |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |